<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06jQuery CSS类增删改</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <style>
        .pink {
            background-color: pink;
        }

        .yellow {
            background-color: yellow;
        }
    </style>
    <script>
        $(function () {
            // addClass()       添加类
            // removeClass()    删除类
            // toggleClass()    有就删除，没有就添加类。
            $("li:even").addClass("pink");
            $("li:odd").addClass("yellow");
        });
    </script>
</head>
<body>
<ol style="width: 10em;">
    <li>Hello1</li>
    <li>Hello2</li>
    <li>Hello3</li>
    <li>Hello4</li>
    <li>Hello5</li>
</ol>
</body>
</html>